<template>
  <div>
    <el-table
        ref="singleTable"
        :border="true"
        :data="list"
        highlight-current-row
        max-height="680"
        show-summary
        style="width: 100%"
    >
      <el-table-column label="序号" sortable type="index" width="50">
      </el-table-column>
      <el-table-column label="活动名称" sortable>
        <template slot-scope="scope">
          <span
              style="color: #00a0e9; cursor: pointer"
              @click="handleGetActivityInfo(scope.row.activityId)"
          >
            {{ scope.row.activityName }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
          label="活动内容"
          prop="activityName"
          sortable
      ></el-table-column>
      <el-table-column
          label="拟招人数"
          prop="activityRecruitPeople"
          sortable
          width="50"
      ></el-table-column>
      <el-table-column
          label="已招人数"
          prop="activityRecruitedPeople"
          sortable
          width="50"
      ></el-table-column>
      <el-table-column
          label="活动积分"
          prop="activityRecruitedPeople"
          sortable
          width="50"
      ></el-table-column>
      <el-table-column
          :filter-method="filterCharge"
          :filters="[
          { text: '否', value: 0 },
          { text: '是', value: 1 },
        ]"
          label="是否收费"
          prop="activityMoney"
          sortable
          width="100"
      >
        <template slot-scope="scope">
          <!--          直接使用钱数量判断是否收费，也可以使用filter 进行过滤-->
          <span>{{ scope.row.activityMoney | isChargeFree }}</span>
        </template>
      </el-table-column>
      <el-table-column
          header-align="center"
          align="center"
          label="操作"
          width="200"
      >
        <template slot-scope="scope">
          <slot name="ctrl" :info="scope.row"/>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="currentPage"
        :page-size="currentPageSize"
        :page-sizes="[10, 50, 100, 500, 1000, 99999]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleGetBySizeActivity"
        @current-change="handleGetByNumActivity"
    />
  </div>
</template>
<script>

export default {
  data () {
    return {
      list: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      keyword: "",
      dataRange: null,
      articleContentshow: false,
      sheet_list: [],
      signShow: false,
      signImg: "",
      searchTime: null,
      auditShow: false,
      auditRes: null,
      auditReason: null,
      refuseReason: false,
      articleShow: false,
      tmpActivityId: "",
    };
  },
  mounted () {
    this.handleGetByNumActivity(1);
  },
  methods: {
    // 格式化成为表格所需要的数据
    async handleGetBySizeActivity (size) {
      const pageNum = this.currentPage;
      let pageSize = this.currentPageSize;
      pageSize = size;
      const res = await this.$http.activityAll({
        pageNum,
        pageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },

    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      this.currentPage = num;
      await this.handleGetActivity();
    },
    async handleGetActivityInfo (params) {
      this.$emit("handleGetActivityInfo", params);
    },
    // 分页查询已完成的活动
    async handleGetActivity () {
      const res = await this.$http.activity_allStatus({
        pageNum: this.currentPage,
        pageSize: this.currentPageSize,
        status: 1,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    filterStatus (value, row) {
      return row.activityStatus === value;
    },
    // 筛选是否收费
    filterCharge (value, row) {
      if (value !== 0) return row.activityMoney !== 0;
      return row.activityMoney === value;
    },
  },
};
</script>
